<template>
  <div>
    <el-form :model="attributeQuery" inline ref="attributeQueryRef">
      <el-form-item label="属性名" prop="attrName">
        <el-input placeholder="请输入属性名" v-model="attributeQuery.attrName"></el-input>
      </el-form-item>
      <el-form-item label="分类" prop="categoryId">
        <el-cascader v-model="attributeQuery.categoryId" :options="categoryList" @focus="getAllCategory" clearable
                     :show-all-levels="false"
                     :props="showProps"/>
      </el-form-item>
      <el-form-item>
        <el-button icon="Search" @click="attributeQueryRef.resetFields()">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button icon="Search" @click="getAttributePage">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="getAllCategory(); dialog = true">新增规格参数</el-button>
    <el-table :data="attributePage.list" v-loading="loading">
      <el-table-column prop="attributeId" label="编号"/>
      <el-table-column prop="attrName" label="属性名"/>
      <el-table-column label="属性类型">
        <template #default="scope">
          <span v-if="scope.row.attrType==0">销售属性</span>
          <span v-if="scope.row.attrType==1">规格参数</span>
          <span v-if="scope.row.attrType==2">规格参数和销售属性</span>
        </template>
      </el-table-column>
      <el-table-column prop="valueSelect" label="可选值列表"/>
      <el-table-column prop="categoryId" label="所属三级分类"/>
      <el-table-column prop="groupName" label="所属分组"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="danger" @click="openUpdate(scope.row)">修改</el-button>
          <el-divider direction="vertical"/>
          <el-button size="small" type="danger" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
        v-model="dialog"
        title="新增规格参数"
        width="500"
        @close="fromRef.resetFields()"
    >
      <div>
        <el-form size="large" label-width="100" :model="attributeForm" ref="fromRef" :rules="rules">
          <el-form-item label="属性名" prop="attrName">
            <el-input placeholder="请输入属性名" v-model="attributeForm.attrName"></el-input>
          </el-form-item>
          <el-form-item label="属性类型" prop="attrType">
            <el-select v-model="attributeForm.attrType" class="m-2" placeholder="请选择" size="large">
              <el-option label="销售属性" :value="0"/>
              <el-option label="规格参数" :value="1"/>
              <el-option label="规格参数和销售属性" :value="2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="可选值列表" prop="valueSelect">
            <el-select v-model="attributeForm.valueSelect" clearable placeholder="Select" filterable allow-create>
            </el-select>
          </el-form-item>
          <el-form-item label="所属分类" prop="categoryId">
            <el-cascader v-model="attributeForm.categoryId" style="width: 100%;" :options="categoryList" clearable
                         :show-all-levels="false"
                         :props="showProps"/>
          </el-form-item>
          <div>
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="attributeForm.status">
                <el-radio :value="0">启用</el-radio>
                <el-radio :value="1">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否快速展示" prop="showDesc">
              <el-switch v-model="attributeForm.quickShow" active-value="0" inactive-value="1"/>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialog = false">取消</el-button>
        <el-button type="primary" @click="submitAttribute(fromRef)">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {
  reqGetSpuCategoryTreeList,
  reqGetSkuAttributePage,
  reqGetSkuAttrGroupListByCategoryId,
  reqCreateSkuAttribute
} from "@/api/serve/re-market";
import type {SkuAttribute} from "@/api/serve/re-market/type";

let fromRef = ref()
let loading = ref(true)
let attributeQueryRef = ref()
let attributeQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  categoryId: '',
})
let attributePage = reactive({
  total: 0,
  list: [],
  pageNum: 1,
})
let dialog = ref(false)
let categoryList = ref([])
let attrGroupList = ref([])
let attributeForm = reactive<SkuAttribute>({
  attrName: '',
  searchType: 0,
  valueSelect: '',
  attrType: 1,
  status: 0,
  categoryId: null,
  quickShow: 0,
})

let showProps = reactive({
  label: 'name',
  value: 'categoryId',
  children: 'children',
  emitPath: false
})

/*获取所有分类数据*/
function getAllCategory() {
  reqGetSpuCategoryTreeList().then(res => {
    categoryList.value = res.data
  })
}

function getAttributePage() {
  reqGetSkuAttributePage(attributeQuery).then(res => {
    Object.assign(attributePage, res.data)
    loading.value = false
  })
}

let getAttrGroupByCateId = () => {
  reqGetSkuAttrGroupListByCategoryId(attributeForm.categoryId).then(res => {
    attrGroupList.value = res.data
  })
}
onMounted(() => {
  getAttributePage()
})

function submitAttribute(r) {
  r.validate((v) => {
    if (v) {
      reqCreateSkuAttribute(attributeForm)
      dialog.value = false
    }
  })
}

let rules = {
  attrName: [
    {required: true, message: '该字段不能为空', trigger: 'blur'},
  ],
  categoryId: [
    {required: true, message: '该字段不能为空', trigger: 'blur'},
  ],
  attrType: [
    {required: true, message: '该字段不能为空', trigger: 'blur'},
  ]
}

</script>

<style scoped>

</style>
